<!DOCTYPE html>
<html>
  <head>
    <title>NEJ实例 - 范围选择器</title>
    <meta charset="utf-8" />
    <style>
      body{background:#FFDDCC;}
      .parent{position:relative;width:500px;height:300px;margin:50px;border:1px solid #aaa;}
     .out{position:absolute;border:1px solid #000;}
     .inr{width:50px;height:50px;border:1px solid #fff;}
     .inr span{position:absolute;}
     .lefttop{top:0;left:0;width:5px;height:5px;line-height:5px;background:transparent;z-index:99;cursor:nw-resize;overflow:hidden}
     .top{top:0;width:100%;height:5px;line-height:5px;background:transparent;z-index:98;cursor:n-resize;overflow:hidden}
     .righttop{top:0;right:0;width:5px;height:5px;line-height:5px;background:transparent;z-index:99;cursor:ne-resize;overflow:hidden}
     .right{right:0;width:5px;height:100%;background:transparent;z-index:98;cursor:_e-resize;overflow:hidden}
     .rightbottom{bottom:0;right:0;width:5px;height:5px;line-height:5px;background:transparent;z-index:99;cursor:se-resize;overflow:hidden}
     .bottom{bottom:0;width:100%;height:5px;line-height:5px;background:transparent;z-index:98;cursor:s-resize;overflow:hidden}
     .leftbottom{bottom:0;left:0;width:5px;height:5px;line-height:5px;background:transparent;z-index:99;cursor:sw-resize;overflow:hidden}
     .left{left:0;width:5px;height:100%;background:transparent;z-index:98;cursor:w-resize;overflow:hidden}
     .lefttop,.righttop,.rightbottom,.leftbottom{border:1px solid #aaa;}
    </style>
  </head>
  <body>
      
      <div class="parent" id="parent">
         <div class="out" id="obox">
           <div class="inr" id="ibox">
             <span class="lefttop">&nbsp;</span>
             <span class="top">&nbsp;</span>
             <span class="righttop">&nbsp;</span>
             <span class="right">&nbsp;</span>
             <span class="rightbottom">&nbsp;</span>
             <span class="bottom">&nbsp;</span>
             <span class="leftbottom">&nbsp;</span>
             <span class="left">&nbsp;</span>
           </div>
         </div>
      </div>
      
    
    <script src="../../../define.js"></script>
    <script>
         NEJ.define([
             'util/resize/resize'
         ],function(_t){
             _t._$$Resize._$allocate({
                 view:'parent',
                 body:'obox',
                 sbody:'ibox',
                 // 自己传样式
                 flag:{
                     1:'top',
                     2:'right',
                     3:'bottom',
                     4:'left',
                     5:'lefttop',
                     6:'righttop',
                     7:'rightbottom',
                     8:'leftbottom'
                 },
                 onresizestart:function(_event){
                     // TODO
                     // _event.top
                     // _event.left
                     // _event.width
                     // _event.height
                 },
                 onresize: function(_event){
                     // TODO
                     // _event.top
                     // _event.left
                     // _event.width
                     // _event.height
                 },
                 onresizeend:function(_event){
                     // TODO
                     // _event.top
                     // _event.left
                     // _event.width
                     // _event.height
                 },
                 onmove:function(_event){
                     // TODO
                     // _event.top
                     // _event.left
                     // _event.width
                     // _event.height
                 }
             });
         });
    </script>
  </body>
</html>